<template>
  <div>
    <div class="div-left">
      <span class="demonstration">时间</span>
      <el-date-picker v-model="valueTime" type="month" @change="timeValue" value-format="yyyy-MM" placeholder="选择月">
      </el-date-picker>
      <el-button  v-hasPermi="['/permission/deptchart']" size="mini" type="primary" @click="exportToPDF">导出图表
      </el-button>
    </div>

    <div class="container">
      <div class="left">
        <el-col :span="16">
          <div class="chart-container" style="height:100%;width:100%">
            <div id="deptChart0" :style="{ width: '750px', height: '340px' }"></div>
          </div>
        </el-col>
      </div>
      <div class="middle">
        <el-col :span="16">
          <div class="chart-container" style="height:100%;width:100%">
            <div id="deptChart1" :style="{ width: '750px', height: '340px' }"></div>
          </div>
        </el-col>
      </div>
      <div class="right">
        <el-col :span="16">
          <div class="chart-container" style="height:100%;width:100%">
            <div id="deptChart2" :style="{ width: '750px', height: '320px' }"></div>
          </div>
        </el-col>
      </div>
    </div>
  </div>
</template>

<script>

  import axios from 'axios'
  import html2pdf from 'html2pdf.js'
  import { AesDecrypt } from '@/utils/AesDecrypt'

  export default {
    data() {
      return {
        valueTime: ''
      }
    },
    components: {},
    created() {
      var today = new Date ()
      var year = today.getFullYear ()//获取年份
      var month = today.getMonth () + 1//获取月份
      var monthOne = (month < 10) ? ('0' + month) : month
      this.valueTime = year + '-' + monthOne
      this.getDeptScone0 (this.valueTime)
      this.getDeptScone1 (this.valueTime)
      this.getDeptScone2 (this.valueTime)
    },
    methods: {
      getDeptScone0(val) {
        axios ({
          method: 'post',
          url: '/hr-xc-human-resources-perform-manage/generator/depperformanceoffice/queryDeptScoreByMonth',
          data: {
            'month': val
          }
        }).then (({ data }) => {
          if (data && data.code === '00000') {
            this.getDeptChart0 (data.result)
          }
        }).catch(error => {
          this.$message.error ('服务器访问异常，请从新登录')
        });
      },

      getDeptScone1(val) {
        axios ({
          method: 'post',
          url: '/hr-xc-human-resources-perform-manage/generator/depperformanceoffice/queryCompanyScoreByMonth',
          data: {
            'month': val
          }
        }).then (({ data }) => {
          if (data && data.code === '00000') {
            this.getDeptChart1 (data.result)
          }
        }).catch(error => {
          this.$message.error ('服务器访问异常，请从新登录')
        });
      },
      getDeptScone2(val) {
        axios ({
          method: 'post',
          url: '/hr-xc-human-resources-perform-manage/generator/depperformanceoffice/queryProfessionDeptScoreByMonth',
          data: {
            'month': val
          }
        }).then (({ data }) => {
          if (data && data.code === '00000') {
            this.getDeptChart2 (data.result)
          }
        }).catch(error => {
          this.$message.error ('服务器访问异常，请从新登录')
        });
      },
      getDeptChart0(val) {
        this.$nextTick (() => {

          var myChart = this.$echarts.init (document.getElementById ('deptChart0'))
          // 指定图表的配置项和数据
          var option = {
            title: {
              text: '部门考核得分情況',
              left: 'center'
            },
            tooltip: {},
            legend: {
              data: ['得分'],
              orient: 'vertical',
              right: 10,
              y: 'bottom'
            },
            xAxis: {
              data: val.x,
              axisLabel: {
                //  X 坐标轴标签相关设置
                interval: 0,
                rotate: '10'
              }
            },
            yAxis: {},
            series: [{
              name: '得分',
              type: 'bar',
              data: val.y,
              barWidth: 30,
              itemStyle: {
                color: function(params) {
                  if (params.data <= 95) {
                    return 'green'
                  }
                },
                normal: {
                  label: {
                    show: true, //开启显示
                    position: 'top', //顶部显示
                    textStyle: {
                      //数值样式
                      color: 'black',
                      fontSize: 12,
                    },
                  },
                }
              }
            }],
            toolbox: {//echart保存为图片
              show: true,
              feature: {
                mark: {
                  show: true
                },
                restore: {
                  show: true
                },
                saveAsImage: {
                  show: true,
                  pixelRatio: 1,
                  title: '保存为图片',
                  type: 'png',
                  lang: ['点击保存']
                }
              }
            }
          }
          // 使用刚指定的配置项和数据显示图表。
          myChart.setOption (option)
        })

      },
      getDeptChart1(val) {
        this.$nextTick (() => {
          var myChart = this.$echarts.init (document.getElementById ('deptChart1'))
          // 指定图表的配置项和数据
          var option = {
            title: {
              text: '县公司考核得分情况',
              left: 'center'
            },
            tooltip: {},
            legend: {
              data: ['得分'],
              orient: 'top',
              right: 10,
              y: 'bottom'
            },
            xAxis: {
              data: val.x,
              axisLabel: {
                //  X 坐标轴标签相关设置
                interval: 0,
                rotate: '10'
              }
            },
            yAxis: {},
            series: [{
              name: '得分',
              type: 'bar',
              data: val.y,
              barWidth: 30
            }],
            toolbox: {//echart保存为图片
              show: true,
              feature: {
                mark: {
                  show: true
                },
                restore: {
                  show: true
                },
                saveAsImage: {
                  show: true,
                  pixelRatio: 1,
                  title: '保存为图片',
                  type: 'png',
                  lang: ['点击保存']
                }
              }
            }
          }
          // 使用刚指定的配置项和数据显示图表。
          myChart.setOption (option)
        })

      },
      getDeptChart2(val) {
        this.$nextTick (() => {
          var myChart = this.$echarts.init (document.getElementById ('deptChart2'))
          // 指定图表的配置项和数据
          var option = {
            title: {
              text: '各专业部门考核扣分情况',
              left: 'center'
            },
            tooltip: {
              trigger: 'item'
            },
            legend: {
              orient: 'horizontal',
              y: 'bottom'
            },
            series: [
              {
                name: '扣分',
                type: 'pie',
                radius: '50%',
                data: val,
                label: {
                  //echarts饼图内部显示百分比设置
                  show: true,
                  position: 'inside', //outside 外部显示  inside 内部显示
                  formatter: `{d}%`,
                  color: '#ffffff', //颜色
                  fontSize: 12 //字体大小
                },
                emphasis: {
                  itemStyle: {
                    shadowBlur: 10,
                    shadowOffsetX: 0,
                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                  }
                }
              }
            ],
            toolbox: {//echart保存为图片
              show: true,
              feature: {
                mark: {
                  show: true
                },
                restore: {
                  show: true
                },
                saveAsImage: {
                  show: true,
                  pixelRatio: 1,
                  title: '保存为图片',
                  type: 'png',
                  lang: ['点击保存']
                }
              }
            }

          }
          myChart.setOption (option)
        })
      },
      timeValue(val) {
        this.getDeptScone0 (val)
        this.getDeptScone1 (val)
        this.getDeptScone2 (val)
      },
      // 导出页面
      exportToPDF() {
        const element = document.querySelector ('.container')

        html2pdf (element, {
          margin: 1,
          filename: 'dashboard.pdf',
          image: { type: 'jpeg', quality: 0.98 },
          html2canvas: { dpi: 192, letterRendering: false },
          jsPDF: { unit: 'pc', format: 'a4', orientation: 'portrait' },
          viewport: 'a4' // 设置画布大小为 A4
        })
      }
    }
  }
</script>
<style scoped>
  .div-left {
    margin: 30px;
    padding-top: 58px
  }

  button {
    width: 120px;
    height: 32px;
    margin: 10px 30px 20px 38px;
  }

  .chart-container {
    width: 100%;
    height: auto;
    margin-bottom: 20px;
  }
</style>
